<template>
  <div class="screen">
    <!-- 头部 -->
    <topContainer @getId='getId' :name='topName' @fullscreen='fullscreen' @getCheckGroup="getCheckGroup"
      @setBoard="setBoard"></topContainer>

    <div class="boardContainer">
      <div class="legend">
        <div class="status" v-for="(val,key) in statusCountMap" :key="key">
          <div :class="['icon',enumState[key] + '_MASK']"></div>
          <span style="margin:0 3px">{{key}}</span>
          <span>{{val}}</span>
        </div>
      </div>
      <div class="cardList scrollNone">
        <div class="card" :style="{width:setWidth}" v-for="i in deviceStatusRateVos" :key="i.deviceId"
          @click="toOee(i)">
          <div class="card-item" :style="{fontSize:setFont}">
            <div class="cardTitle" :class="enumState[i.statusName]">
              <span class="ellipsis">{{i.deviceSn}}</span>
              <span class="ellipsis">{{i.deviceName}}</span>
            </div>
            <div class="card-body" :class="enumState[i.statusName] + '_MASK'">
              <span v-show="i.statusName =='关机'" class="ellipsis">{{i.statusName}}</span>
              <span v-show="i.statusName !='关机'" class="ellipsis">{{i.rate + '%'}}</span>
            </div>
            <div class="card-bottom">
              <span v-show="i.statusName !='关机' && i.statusName !='运行'" :class="enumState[i.statusName]"
                class="ellipsis">
                {{i.statusName}}&nbsp;&nbsp;{{i.durationCN}}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <setBoard ref="setBoard" @confirm="confirm" :checkGroup="checkGroup"></setBoard>
  </div>
</template>

<script>
  import {
    statusDashboard
  } from '@/api/deviceController'
  import {
    getSearchCache
  } from '@/api/produceController'
  import setBoard from './setBoard.vue'
  export default {
    data() {
      return {
        enumState: {
          '关机': 'off',
          '故障': 'hitch',
          '离线': 'off',
          '等待': 'wait',
          '运行': 'move'
        },
        checkGroup: [],
        deviceStatusRateVos: [],
        statusCountMap: {},
        topName: '设备运行状态看板',
        groupId: '',
        cacheInfo: {}
      }
    },
    computed: {
      setWidth() {
        return (100 / this.cacheInfo.number) + '%'
      },
      setFont() {
        return (90 / this.cacheInfo.number) + 'px'
      }
    },
    components: {
      setBoard
    },
    methods: {
      //分组id
      getId(id) {
        this.groupId = id
        this.getSearchCacheFn({
          cacheName: 'device:set',
          type: 0
        }).then(()=>{
          this.handleInterface()
        })
      },
      getCheckGroup(checkGroup) {
        this.checkGroup = checkGroup
      },
      //看板列表
      getStatusDashboard: async function (data) {
        const res = await statusDashboard(data)
        if (res.code == 200) {
          const {
            interval
          } = this.cacheInfo
          this.statusCountMap = res.data.statusCountMap
          this.deviceStatusRateVos = res.data.deviceStatusRateVos
          clearInterval(window.screenTimer)
          window.screenTimer = setInterval(() => {
            this.handleInterface()
          }, interval * 1000)
        }
      },
      //oee明细
      toOee(device) {
        this.$router.push({
          path: '/equipmentBoard/screen/oeeDetail',
          query: {
            deviceId: device.deviceId,
            deviceName: device.deviceName
          }
        })
      },
      //获取缓存信息
      getSearchCacheFn: async function (data) {
        const res = await getSearchCache(data)
        this.cacheInfo = res.data !== null ? JSON.parse(res.data) : {
          number: 9,
          interval: 10,
          groupIds: this.checkGroup.map(i => i.id),
          showClose: false
        }
      },
      fullscreen(isFull) {
        let elem = document.querySelector(".screen")
        isFull ? elem.requestFullscreen() : document.exitFullscreen()
      },
      setBoard() {
        let jsonData = JSON.parse(JSON.stringify(this.cacheInfo))
        this.$refs.setBoard.open(jsonData)
      },
      confirm(form) {
        this.cacheInfo = form
        this.handleInterface()
      },
      handleInterface() {
        this.getStatusDashboard({
          groupId: this.groupId,
          groupIds: this.cacheInfo.groupIds.toString(),
          showClose: this.cacheInfo.showClose
        })
      }
    },
    beforeRouteLeave(to, from, next) {
      clearInterval(window.screenTimer)
      next()
    }
  }
</script>

<style lang="less" scoped>
  .screen {
    padding: 20px;
    background-color: #000;
    overflow-y: auto;
    height: 100%;

    .off {
      color: @text-color-off;
    }

    .hitch {
      color: @text-color-hitch;
    }

    .wait {
      color: @text-color-wait;
    }

    .move {
      color: @text-color-move;
    }

    .off_MASK {
      background-color: @text-color-off;
    }

    .hitch_MASK {
      background-color: @text-color-hitch;
    }

    .wait_MASK {
      background-color: @text-color-wait;
    }

    .move_MASK {
      background-color: @text-color-move;
    }

    .boardContainer {
      border: 1px solid rgba(58, 200, 243, .8);
      height: calc(100% - 76px);
      padding: 10px 0 15px 15px;

      .legend {
        display: flex;

        .status {
          display: flex;
          align-items: center;
          margin-right: 10px;

          .icon {
            width: 15px;
            height: 10px;
            border: 1px solid #9b9999;
            cursor: pointer;
          }

          span {
            font-size: 14px;
            color: white;
          }
        }
      }

      .cardList {
        display: flex;
        flex-wrap: wrap;
        height: calc(100% - 19px);
        overflow-y: auto;
        align-content: flex-start;

        .card {
          padding-right: 15px;

          .card-item {
            margin-top: 15px;
            background-color: #e3fdf7;
            border-radius: 8px;
            cursor: pointer;

            .cardTitle {
              display: flex;
              flex-direction: column;
              font-size: 1.4em;
              height: 3em;
              color: #999;
              padding: 0 0.5em 0 0.5em;
              text-align: left;

            }

            .card-body {
              height: 12em;
              color: #fff;
              display: flex;
              text-align: center;
              align-items: center;

              span {
                display: inline-block;
                width: 100%;
                font-size: 1.6em;
                font-weight: 650;
              }
            }

            .card-bottom {
              height: 2.5em;
              line-height: 2.5em;
              font-size: 1.4em;
              padding: 0 0.5em 0 0.5em;
              text-align: center;
            }
          }
        }

        .ellipsis {
          width: 100%;
          display: inline-block;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }
</style>